<template>
  <div>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <div id="demo">
      <button v-on:click="show = !show">
        Toggle
      </button>
      <transition name="qwe" 
        enter-active-class="animated bounceInLeft"
        leave-active-class="animated bounceOutRight">
        <div style="width: 200px;margin:auto;" v-if="show">
          <p  style="text-align: center;">今天天气不错！！！！！</p>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  }
};
</script>

<style>
/* .qwe-enter,
.qwe-leave-to {
  opacity: 0;
  transform: translate(100px, 100px);
}
.qwe-leave-active,
.qwe-enter-active {
  transition: all 2s;
}
.qwe-leave,
.qwe-enter-to {
  opacity: 1;
  transform: translate(0px, 0px);
} */
/* 
.qwe-enter-active {
  animation: boundle-in 2s;
}

.qwe-leave-active {
  animation: boundle-in 2s reverse;
}
@keyframes boundle-in {
  0% {
    transform: scale(0);
  }

  30%{
     transform: scale(2);
  }

  100%{
    transform: scale(1);
  }
} */
</style>